// 3.1导入aixos的包
import axios from 'axios'

import store from '@/store'

// 3.2调用aixos.create()这个函数因为这个是aixos的方法
// 自定义配置新建一个实例
const instance = axios.create({
  baseURL: 'http://pcapi-xiaotuxian-front-devtest.itheima.net',
  // 基础url    通过webpack配置运行环境的判断，可以更改线上地址，开发地址前缀
  timeout: 5000 // 响应超时时间
})

// 3.3请求拦截器=
// 添加请求拦截器===这个是获取token的值
instance.interceptors.request.use(function (config) {
  // 在发送请求之前做些什么

  // 18.2 1.我先去去取vuex里的数据，导入useStore()
  // 18.2  2.store.state.起的模块名字.state里给的数据名字.token

  const token = store.state.user.profile.token
  // 18.2 进行token判断，如果有有token{前面是请求头==后面是后端来告诉前端怎么拼}

  // 请求header中添加
  if (token) {
    config.headers.Authorization = `Bearer ${token}`
  }
  return config
}, function (error) {
  // 对请求错误做些什么
  return Promise.reject(error)
})

// 3.4响应拦截求
// 添加响应拦截器====获取状态码，以及token失效
// 以及后端自定义的接口状态码做判断处理返回数据和自定义错误抛出
instance.interceptors.response.use(function (response) {
  // 2xx 范围内的状态码都会触发该函数。
  // 对响应数据做点什么
  return response.data// 添加.data就是为了后面数据不用写data
}, function (error) {
  // 超出 2xx 范围的状态码都会触发该函数。
  // 对响应错误做点什么
  return Promise.reject(error)
})
// 3.5封装一个自动以方法，给api模板做一层简单的封装
// 目的：方便接口发送的时候，可以无视get/post请求，做参数兼容
// 需求描述

/**
 *
 * 1.封装一个函数，名称为request
 * 2.这个函数接收三个参数 分别是url, method, reqData(对象)
 * 3.这个函数的执行结果要就是一个promise对象，业务中可以这样来使用 request (url, 'GET', reqData()).then(res=>())
 * 4.用不管是传递get/post，都能正确处理axios参数
 */
function request (url, method, reqData) {
  return instance({
    url,
    method,
    // 根据传入的method适配key到底是params还是data
    // get->params  post->data
    /**
     * GET - 从指定的资源请求数据。
     * POST - 向指定的资源提交要被处理的数据。
     */
    // js里小写转大写
    // 对象key的计算属性，适配一个不确定的key
    [method.toUpperCase() === 'GET' ? 'params' : 'data']: reqData
  })
}

// 3.6默认导出
export default request
